<template>
    <h4>模块化异步请求方法</h4>
    <p>将本来定义在组件中异步请求方法，以node模块(ES6转换)的方式进行统一定义和管理，在组件进行调用</p>
    <el-alert v-show="flag" title="数据加载失败" type="error" effect="dark" />
    <p>src/api/apiRquest.js</p>
    <img src="@/assets/error/29.png" alt="" srcset=""> <br>
    <img src="@/assets/error/30.png" alt="" srcset=""> <br>
    <img src="@/assets/error/31.png" alt="" srcset=""> <br>
    <pre>请求数据 <br> {{ users }}</pre>
    <input type="button" value="发送请求加载数据" @click="sendRquestA()"> <br>
    <input type="button" value="发送请求加载数据" @click="sendRquestB()"> <br>
    <pre>请求参数响应结果 <br> {{ result }} </pre>
    <input v-model="params.a" type="text" placeholder="参数a"/>
    <input v-model="params.b" type="text" placeholder="参数b"/>
    <br>
    <input type="button" value="发送get参数" @click="sendRquestGet()"> <br>
    <input type="button" value="发送post参数" @click="sendRquestPost()"> <br>

</template>

<script>
import { ElNotification } from 'element-plus'
// import api from "@/api/apiRequest.js";
import { findUserList,sendRquestParams,sendRquestBodyParams } from "@/api/apiRequest.js"
export default {
    data() {
        return {
            flag:false,
            users: [],
            result:{},
            params:{
                a:"",
                b:""
            },
        }
    },
    methods: {
        sendRquestA() {
            findUserList()
                .then((response) => { 
                    // console.log(response);
                    this.users = response.data;
                })
                .catch((error) => {
                    // 使用者查看错误消息提示
                    // 浮动层的统一错误提示
                    ElNotification.error({
                        title:"加载数据失败"
                    })
                    // 基于业务的页面错误提示
                    this.flag = true;
                    // 开发者查看错误消息
                    console.error(error);
                })
        },
        async sendRquestB(){
            try {
                let { data } = await findUserList()
                this.users = data;
            } catch (error) {
                // 使用者查看错误消息提示
                // 浮动层的统一错误提示
                ElNotification.error({
                    title:"加载数据失败"
                })
                // 基于业务的页面错误提示
                this.flag = true;
                // 开发者查看错误消息
                console.error(error);
            }
        },
        async sendRquestGet(){
            try {
                let { data } = await sendRquestParams(this.params);
                this.result = data;
            } catch (error) {
                console.error(error);
            }
        },
        async sendRquestPost(){
            try {
                let { data } = await sendRquestBodyParams(this.params);
                this.result = data;
            } catch (error) {
                console.error(error);
            }
        }
    },
}
</script>

<style lang="scss" scoped>

</style>